<template>
    <!-- 融资额度占用   -->
    <div class="largeFundSettingPage">
        <el-card shadow="never" class="box-card d-flex flex-column">
            <div class="title-box d-flex j-center">
                <common-title title-name="融资额度占用反馈"/>
            </div>
            <div class="content-box d-flex">
                <el-form
                        ref="ruleFormRef"
                        :model="form"
                        :rules="rules"
                        class="d-flex j-center px-50"
                >
                    <div class="d-flex flex-column">
                        <div class="form-item d-flex a-center m-b20">
                            <label class="m-r10">开启金额预警</label>
                            <el-switch v-model="form.status" active-color="#fe8740" :active-value="1" :inactive-value="-1" ></el-switch>
                        </div>
                        <div class="form-item d-flex a-center m-b20">
                            <label>已使用额度带到总额的</label>
                            <el-form-item class="m-l10 m-r10" prop="fundLimitAmount">
                                <el-input
                                        v-model="form.creditLimit"
                                        placeholder="/%"
                                        @input="form.creditLimit = limitInputNum(form.creditLimit,3,4,false)"
                                ></el-input>
                            </el-form-item>
                            <label>开始提醒</label>
                            <el-divider class="m-l20 m-r20" direction="vertical" />
                            <label>每</label>
                            <el-form-item class="m-l10 m-r10" prop="dayCount">
                                <el-input
                                        v-model="form.dayCount"
                                        placeholder="/天"
                                        @input="form.dayCount = limitInputNum(form.dayCount,4,0,false)"
                                ></el-input>
                            </el-form-item>
                            <label>天提醒</label>
                            <el-form-item class="m-l10 m-r10" prop="number">
                                <el-input
                                        v-model="form.times"
                                        placeholder="/次"
                                        @input="form.times = limitInputNum(form.times,4,0,false)"
                                ></el-input>
                            </el-form-item>
                            <label>次</label>
                        </div>
                        <el-form-item class="m-l10 m-r10" prop="remark">
                            <el-input
                                    v-model="form.remark"
                                    :rows="8"
                                    type="textarea"
                                    maxlength="50"
                                    show-word-limit
                                    placeholder="请输入提示内容（限制50字以内）"
                            />
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </el-card>
        <div class="buttons-box m-t20 d-flex a-center j-center">
            <el-button
                    :loading="loading"
                    class="button_view"
                    @click="onSave"
            >保存</el-button>
        </div>
    </div>
</template>

<script setup>
import {ElCard, ElDivider, ElForm, ElFormItem, ElMessage, ElSwitch} from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import {onMounted, reactive, ref} from "vue";
import {financingApi, fundManagementApi} from "@/api/businessFinance";
import {limitInputNum} from "@/common/utils/GlobalUtils";

const form = reactive({
    ruleId: '',
    creditLimit: '',
    dayCount: '',
    times: '',
    remark: '',
    status:'1'
});

const rules = reactive({
    creditLimit:[
        { required: true, message: '融资金额限制百分比不为空!', trigger: 'blur' },
    ],
    dayCount:[
        { required: true, message: '间隔天数不为空!', trigger: 'blur' },
    ],
    times:[
        { required: true, message: '次数不为空!', trigger: 'blur' },
    ],
    remark:[
        { required: true, message: '备注不为空!', trigger: 'blur' },
    ]
});

const getBankCreditRule = () => {
    financingApi.getBankCreditRule().then(res=>{
        if(res.code === '200'){
            for(let key in form){
                for (let k in res.data){
                    if(key === k){
                        form[key] = res.data[k];
                    }
                }
            }
        }
    });
}

const loading = ref(false);
const saveBankCreditRule = (param) => {
    console.log('parmas',param)
    financingApi.saveBankCreditRule(param).then(res=>{
        if(res.code === '200'){
            loading.value  = false;
            ElMessage.success('操作成功!');
        }
    });
}

const ruleFormRef = ref(null);
const onSave = () => {
    ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            loading.value  = true;
            saveBankCreditRule(form);
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(()=>{
    getBankCreditRule();
});
</script>

<style lang="scss" scoped>
.largeFundSettingPage{
  height: 100%;
  .content-box{
    height: 100%;
    .el-form-item{
      margin-bottom: 0px !important;
    }
    .el-form{
      width: 100%;
    }
  }
  .box-card{
    width: 80%;
  }
  .buttons-box{
    width: 70%;
  }
}
</style>
